<template>
    <!-- <div ref="iframeCnt" class="com-cnt"></div> -->
    <div class="com-cnt">
        <div class="head" :style='mypagebg'>
            <button id="logout" class="logout">退出</button>
            <div class="user">
                <div class="user_head">
                    <img :src="photo" alt="" class='zu' style="width:100%;height:100%;">
                </div>
                    <div class="user_box">
                        <input readonly="readonly " class="user_name" :value="nickName" />
                </div>
                        <div class="fwdm">
                            服务代码：{{userlist.personCount}}
                        </div>
                    </div>
                    <ul>
                        <li class="te">
                            <div class="qi">{{userlist.countMember}}</div>
                            <p class="money">会员人数</p>
                        </li>
                        <li>
                            <div class="qi">{{userlist.money}}</div>
                            <p class="money">当前佣金</p>
                        </li>
                    </ul>
                </div>

                <div class="biao">
                    <ul class="list">
                        <li @click="direct('userinfoshow')">
                            <img :src="userinfoshow" alt="" class="tx">
                            <span class="bt">个人信息</span>
                            <span class="tz">&gt;</span>
                        </li>
                        <!-- <li @click="direct('bankcard')">
                    <img :src="mycardid" alt="" class="tx">
                    <span class="bt">我的银行卡</span>
                    <span class="tz">&gt;</span>
                </li> -->
                        <li @click="direct('vipList')">
                            <img :src="viplist" alt="" class="tx">
                            <span class="bt">会员列表</span>
                            <span class="tz">&gt;</span>
                        </li>
                        <li @click="direct('yjRecord')">
                            <img :src="yjjl" alt="" class="tx">
                            <span class="bt">佣金记录</span>
                            <span class="tz">&gt;</span>
                        </li>
                        <li @click="direct('txRecommend')">
                            <img :src="sqtx" alt="" class="tx">
                            <span class="bt">申请提现</span>
                            <span class="tz">&gt;</span>
                        </li>
                        <li @click="direct('txRecord')">
                            <img :src="txrecord" alt="" class="tx">
                            <span class="bt">提现记录</span>
                            <span class="tz">&gt;</span>
                        </li>
                        <li @click="direct('ckhelp')">
                            <img :src="help" alt="" class="tx">
                            <span class="bt">客服与帮助</span>
                            <span class="tz">&gt;</span>
                        </li>

                    </ul>
                </div>
                <div class="mask" v-if="hideFlag==false">
                    <div class="notApply">

                    </div>
                </div>
            </div>

</template>

<script>
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import { domain } from '@/assets/js/config'
import { domains } from '@/assets/js/config'
import iconCom from '@/common/icon/selecticon.vue'
import $ from 'jquery'
import Qs from 'qs'
import { maskTips } from '@/assets/js/dom'
import { Toast } from 'mint-ui';
export default {
    name: 'centerPage',
    components: {

    },
    data() {
        return {
            userToken: '',
            item: {},
            nickName: '',
            hideFlag: true,
            userlist: '',
            uthenticationStatus: '',
            photo: '',
            mypagebg: {
                backgroundImage: "url(" + require("../../assets/imgs/my/bg.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% auto"
            },
            title: {
                backgroundImage: "",
                backgroundSize: '100% 100%',
                backgroundRepeat: "no-repeat",
            },
            help: require('../../assets/imgs/agent/help.png'),
            mycardid: require('../../assets/imgs/agent/mycardid.png'),
            sqtx: require('../../assets/imgs/agent/sqtx.png'),
            txrecord: require('../../assets/imgs/agent/txrecord.png'),
            userinfoshow: require('../../assets/imgs/agent/userinfoshow.png'),
            viplist: require('../../assets/imgs/agent/viplist.png'),
            yjjl: require('../../assets/imgs/agent/yjjl.png'),
            //jkzx: require('../../assets/imgs/agent/jkzx.png'),
            gg: require('../../assets/imgs/my/gg.png'),
        }
    },
    mounted() {
        var that = this
        //页面入口检测登录
        var userToken = localStorage.getItem("tokens") || '' //用户token值
        this.userToken = userToken
        if (!userToken) {
            that.$router.push('/agApply')
        } else {
            console.log('token:' + userToken)
            // getuserinfo(userToken)
        }
        that.inforNow();

        $('#logout').bind('click', function () {
            localStorage.setItem('tokens', '')
            that.$router.push('/agApply')
        })

        $('.an button').click(function () {
            var self = $(this);
            self.addClass('active').siblings().removeClass('active');
        });

    },
    methods: {
        inforNow: async function () {
            const res = await https.post('f/agent/home/center?token=' + this.userToken)
            // console.log(res);
            if (res.data.code === 100) {
                this.nickName = res.data.data.nickName
                this.photo = res.data.data.photo
                this.userlist = res.data.data
                var headphoto = res.data.data.photo
                // console.log(headphoto)
                $('#headimg').css('background-image', 'url(' + headphoto + ')')
                //$('#userScore').text(userScore)
            } else if (res.data.code == 1) {
                //还不是代理人
                that.hideFlag = false
            } else {
                // Toast({ message: res.data.message, duration: 1000 });
                // this.$router.push('/agApply')
            }
        },
        cantclick: function () {
            // console.log(456)
            maskTips({ id: 'cantclick', txt: '您还不是会员' })
        },
        direct: function (val) {
            this.$router.push({ path: "/" + val });
        },
        alertPlease: function () {
            maskTips({ id: 'just-alert', txt: '敬请期待' })
        },
        touserinfo: function () {
            this.$router.push('/userinfo')
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #F0F0F0;
    overflow-y: auto;
    position: relative;
    z-index: 99;
}

.head {
    height: 4.7rem;
    width: 100%;
    border-bottom: 12px solid #f0f0f0;
}

.head .logout {
    border: none;
    outline: none;
    font-size: 0.24rem;
    float: right;
    font-family: 'PingFang-SC-Medium';
    background: #8cb337;
    color: #fff;
    margin-top: 0.2rem;
    margin-right: 0.1rem;
}

.head .user {
    width: 100%;
    padding-top: 21px;
}

.head .user .user_head {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    border: 3px solid #fff;
    border-radius: 100%;
}

.head .user .user_head .zu {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.head .user .fwdm {
    width: 115px;
    height: 27px;
    line-height: 27px;
    margin: 0 auto;
    font-size: 12px;
    color: #333333;
}

.head .user .user_box {
    width: 175px;
    height: 30px;
    padding-top: 10px;
    margin: 0 auto;
}

.head .user .user_box .user_name {
    font-family: 'PingFangSC-Regular';
    color: #333;
    background: transparent;
    font-size: 14px;
    display: block;
}

.head .user .user_box .uesr_title1 {
    width: 1.4rem;
    height: 0.4rem;
    border-radius: 10px;
    background: #9000ff;
    font-size: 0.24rem;
    font-family: 'PingFangSC-Regular';
    color: #fff;
    position: absolute;
    top: 0.8rem;
    /* text-align: right; */
    padding-left: 26px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.head ul {
    width: 100%;
    height: 1.72rem;
    padding: 0.24rem 0;
    box-sizing: border-box;
    float: left;
    display: flex;
    flex-direction: row;
}

.head ul li {
    height: 100%;
    float: left;
    flex: 1;
    text-align: center;
}

.head ul .te {
    border-left: 1px solid #f6f6f6;
    border-right: 1px solid #f6f6f6;
}

.head ul li .qi {
    width: 0.68rem;
    height: 0.68rem;
    font-size: 0.27rem;
    font-family: 'PingFangSC-Regular';
    color: #aad112;
    line-height: 0.68rem;
    margin: 0 auto;
}

.head ul li .money {
    font-size: 0.36rem;
    font-family: 'PingFang-SC-Medium';
    color: #8FC122;
    margin-top: 0.1rem;
}

.an {
    width: 100%;
    height: 1.48rem;
    padding: 0.4rem 1rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.24rem;
}

.an button {
    border: 1px solid #a4ce48;
    outline: none;
    font-size: 0.3rem;
    color: #8cb337;
    font-family: 'PingFang-SC-Medium';
    background: #fff;
    border-radius: 15px;
    width: 2.4rem;
    height: 0.64rem;
}

.an .btn_l {
    float: left;
}

.an .btn_r {
    float: right;
}

.an .active {
    background: #8fc122;
    color: #fff;
}

.biao {
    background: #fff;
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    box-sizing: border-box;
}

.biao .list {
    width: 100%;
    height: 100%;
}

.biao .list li {
    width: 100%;
    height: 0.93rem;
    border-bottom: 1px solid #f3f3f3;
    font-size: 0.27rem;
    color: #666;
    font-family: 'PingFangSC-Regular';
}

.biao .list li .tx {
    float: left;
    margin: 0.26rem 0.28rem 0;
    width: 22px;
    height: 22px;
}

.biao .list li .bt {
    float: left;
    line-height: 0.93rem;
}

.biao .list li .tz {
    float: right;
    line-height: 0.93rem;
    margin-right: 0.3rem;
}

.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 1);
    z-index: 100;

    .notApply {
        width: 256px;
        height: 115px;
        position: absolute;
        top: 267px;
        left: 59px;
        background: url('../../assets/imgs/agent/notApply.png');
        background-size: 100% 100%;
    }
}
</style>
